<template>
  <div>
    <el-row>
      <el-col
        :span="8"
        v-for="(o, index) in 2"
        :key="o"
        :offset="index > 0 ? 2 : 0"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img :src="updateSrc" class="image" />
          <div style="padding: 14px">
            <span>{{ name }}</span>
            <div class="bottom clearfix">
              <time class="time" style="display: block; margin-bottom: 30px"
                >当前时间: {{ currentDate }}</time
              >
              <el-button
                type="text"
                class="button"
                @click="updateSrcc"
                style="margin-left: 10px"
                >修改图片</el-button
              >
              <el-button type="text" class="button" @click="recovery"
                >复原图片</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date().toLocaleString(),
      updateSrc: require("../../assets/images/huawei.jpg"),
      name: "华为p40",
    };
  },
  methods: {
    updateSrcc() {
      this.$confirm("此操作将修改图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateSrc = require("../../assets/images/苹果14.jpg");
          this.name = "苹果14";
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    recovery() {
      this.$confirm("此操作将复原图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateSrc = require("../../assets/images/huawei.jpg");
          this.name = "华为p40";
          this.$message({
            type: "success",
            message: "复原成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消复原",
          });
        });
    },
  },
};
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
